/**
 * Created by GUO on 2017/5/19.
 * @flow
 * 文章
 */

import React from 'react';
import {
    View,
    Text,
    StyleSheet,
    Image,
    Dimensions,
    ActivityIndicator,
    Platform,
} from 'react-native';
import BaseScreen from '../BaseScreen';
import Icon from 'react-native-vector-icons/MaterialIcons';
import {ViewPager,TabPageIndicator} from '../widget';
import PostsList from './PostsList';

const REF_VIEW_PAGER = 'REF_VIEW_PAGER';
const TABS = [
    {label:'推荐',lang:'-1',cid:'0',url:'/articles/rec.json'},
    {label:'热门',lang:'1',cid:'0',url:'/articles/hot.json'},
    {label:'科技',lang:'1',cid:'101000000',url:'/articles/hot.json'},
    {label:'创业',lang:'1',cid:'101040000',url:'/articles/hot.json'},
    {label:'数码',lang:'1',cid:'101050000',url:'/articles/hot.json'},
    {label:'技术',lang:'1',cid:'20',url:'/articles/hot.json'},
    {label:'设计',lang:'1',cid:'108000000',url:'/articles/hot.json'},
    {label:'营销',lang:'1',cid:'114000000',url:'/articles/hot.json'},
];

const makeTitleBarButtons = (onPress: (key: string)=>void)=> {
    let searchButton = (<Icon
        onPress={()=> onPress('search')}
        name="search"
        size={24}
        color="white"
        style={styles.titleBarIcon}/>);

    let moreButton = (<Icon
        onPress={()=> onPress('more')}
        name={Platform.select({ios:'more-horiz',android:'more-vert'})}
        size={24}
        color="white"
        style={styles.titleBarIcon}/>);

    return Platform.select({
       ios:{headerLeft:searchButton,headerRight:moreButton},
        android:{
            headerRight:<View style={styles.barButtonContainer}>{searchButton}{moreButton}</View>
        }
    });

};

export default class PostsScreen extends BaseScreen {

    static navigationOptions = ({ navigation }) => {
        let {onPressTitleBarButton} = navigation.state.params || {};

        return {
            title: '文章',
            tabBarIcon: ({ tintColor }) => (
                <Icon size={26} color={tintColor} name="home"/>
            ),
            ...makeTitleBarButtons(onPressTitleBarButton)
        };
    };

    state = {
        tabIndex: 0,
    };

    constructor(props: any){
        super(props);

        console.log('====>props>>>>>>>>>',props);

        props.navigation.setParams({onPressTitleBarButton:this.onPressTitleBarButton.bind(this)});
    }

    onPressTitleBarButton(){

    }

    render(){
        return (
            <View style = {styles.container}>
                <TabPageIndicator
                    onPressItem={this._onPressTabPageIndicatorItem.bind(this)}
                    index={this.state.tabIndex}
                    labels={TABS.map(tab => tab.label)}/>

                <ViewPager
                    ref = {REF_VIEW_PAGER}
                    onPageSelected = {this._onPageSelected.bind(this)}
                    style={styles.viewPager}>

                    {TABS.map((tab,index) =>(
                        <View key={tab.label}>
                            <PostsList
                                onPressItem={this._onPressPostItem.bind(this)}
                                initLoad={index == this.state.tabIndex}
                                ref = {tab.label}
                                lang={tab.lang} url={tab.url} cid={tab.cid}/>
                        </View>
                    ))}
                </ViewPager>
            </View>
        );
    }

    _onPressPostItem(item){
        this.props.navigation.navigate('postDetail',{article:item});
    }

    _onPageSelected({nativeEvent}){
        let index = nativeEvent.position;
        this.setState({tabIndex:index});
        this.refs[TABS[index].label].fetchDataIfNeed();
    }

    _onPressTabPageIndicatorItem(index: number){
        this.setState({tabIndex:index});
        this.refs[REF_VIEW_PAGER].setPage(index);

        if(Platform.OS == 'android'){ //android 的 setPage不会触发onPageSelected
            this._onPageSelected({nativeEvent:{position:index}});
        }
    }

}

const styles = StyleSheet.create({
    container:{
        flex:1,
    },
    barButtonContainer:{
        flexDirection:'row'
    },
    titleBarIcon:{
        paddingHorizontal:10,
    },
    viewPager:{
        flex:1,
    },
    page:{
        backgroundColor:'gray',
    }
});